<?php 
require_once '../functions.php';
xiu_get_current_user();
//修改操作要在查询操作之前进行
//先验证表单的提交
function add_categories(){
    if (empty($_POST['name']) || empty($_POST['slug'])) {
    $GLOBALS['message'] = '请完整填写表单！';
    return;
  }
    // 接收并保存
    $name = $_POST['name'];
    $slug = $_POST['slug'];

    // insert into categories values (null, 'slug', 'name');
    $rows = xiu_execute("insert into categories values (null, '{$slug}', '{$name}');");

    $GLOBALS['success'] = $rows > 0 ;
    $GLOBALS['message'] = ($rows < 0 || $rows = 0)? '添加失败！' : '添加成功！';
  
}

function edit_categories(){
  GLOBAL $edit;
  $id=$edit['id'];
  // 接收并保存
  // 如果没填则保存之前的数据
  $name = empty($_POST['name']) ? $edit['name'] : $_POST['name'];
  $edit['name']=$name;
  $slug = empty($_POST['slug']) ? $edit['slug'] : $_POST['slug'];
  $edit['slug']=$slug;
  // insert into categories values (null, 'slug', 'name');
  $rows = xiu_execute("update categories set slug = '{$slug}', name = '{$name}' where id = {$id}");
  $GLOBALS['success'] = $rows > 0 ;
  $GLOBALS['message'] = ($rows < 0 || $rows = 0)? '修改失败！' : '修改成功！';
}







//区别点的到底是修改按钮还是添加按钮，get为修改
  if(empty($_GET['id'])){ 
  //不是get执行添加表单    
    if($_SERVER['REQUEST_METHOD']==='POST'){
     add_categories();
     }
   }else{
    //取出之前的数据
    $edit=xiu_fetch_one('select *from categories where id='.$_GET['id']);
    //如果点了修改按钮，就执行这段代码
     if($_SERVER['REQUEST_METHOD']==='POST'){
      edit_categories();
    }
   }
   
    //再封装函数


$categories=xiu_fetch_all('select * from categories;');
 ?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>Categories &laquo; Admin</title>
  <link rel="stylesheet" href="../static/assets/vendors/bootstrap/css/bootstrap.css">
  <link rel="stylesheet" href="../static/assets/vendors/font-awesome/css/font-awesome.css">
  <link rel="stylesheet" href="../static/assets/vendors/nprogress/nprogress.css">
  <link rel="stylesheet" href="../static/assets/css/admin.css">
  <script src="../static/assets/vendors/nprogress/nprogress.js"></script>
</head>
<body>
  <script>NProgress.start()</script>

  <div class="main">
    <?php include 'inc/navbar.php'; ?>

    <div class="container-fluid">
      <div class="page-title">
        <h1>分类目录</h1>
      </div>
      <!-- 有错误信息时展示 -->
      <?php if (isset($message)): ?>
            <?php if (isset($success)): ?>
                <div class="alert alert-success">
                    <strong>成功！</strong><?php echo $message; ?>
                </div>
            <?php else: ?>
                <div class="alert alert-danger">
                    <strong>错误！</strong> <?php echo $message; ?>
                </div>
            <?php endif ?>
      <?php endif ?>
    
      <div class="row">
        <div class="col-md-4">
          <?php if (isset($edit)): ?>
            <form action="<?php echo $_SERVER['PHP_SELF']; ?>?id= <?php echo $edit['id']; ?>" method="post" autocomplete="off">
            <h2>修改 <?php echo $edit['name']; ?></h2>
            <div class="form-group">
              <label for="name">名称</label>
              <input id="name" class="form-control" name="name" type="text" placeholder="分类名称" value=" <?php echo $edit['name'] ?>">
            </div>
            <div class="form-group">
              <label for="slug">别名</label>
              <input id="slug" class="form-control" name="slug" type="text" placeholder="slug" value=" <?php echo $edit['slug']; ?>">
              <p class="help-block">https://zce.me/category/<strong>slug</strong></p>
            </div>
            <div class="form-group">
              <button class="btn btn-primary" type="submit">修改</button>
            </div>
          </form>
            <?php else: ?>
              <form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" autocomplete="off">
            <h2>添加新分类目录</h2>
            <div class="form-group">
              <label for="name">名称</label>
              <input id="name" class="form-control" name="name" type="text" placeholder="分类名称">
            </div>
            <div class="form-group">
              <label for="slug">别名</label>
              <input id="slug" class="form-control" name="slug" type="text" placeholder="slug">
              <p class="help-block">https://zce.me/category/<strong>slug</strong></p>
            </div>
            <div class="form-group">
              <button class="btn btn-primary" type="submit">添加</button>
            </div>
          </form>
          <?php endif ?>
        </div>
        <div class="col-md-8">
          <div class="page-action">
            <!-- show when multiple checked -->
            <a id="btn_delete" class="btn btn-danger btn-sm" href="categories-delete.php" style="display: none">批量删除</a>
          </div>
          <table class="table table-striped table-bordered table-hover">
            <thead>
              <tr>
                <th class="text-center" width="40"><input type="checkbox" id="all"></th>
                <th>名称</th>
                <th>Slug</th>
                <th class="text-center" width="100">操作</th>
              </tr>
            </thead>
            <tbody>
              <?php foreach ($categories as $items): ?>
                <tr>
                <!--在HTML标签中加自定义属性要在前面加个data-  -->
                    <td class="text-center"><input type="checkbox" data-id="<?php echo $items['id']; ?>"></td>
                    <td><?php echo $items['name'] ?></td>
                    <td><?php echo $items['slug'] ?></td>
                    <td class="text-center">
                      <a href="categories.php?id=<?php echo $items['id']; ?>" class="btn btn-info btn-xs">编辑</a>
                      <a href="categories-delete.php?id=<?php echo $items['id']; ?>" class="btn btn-danger btn-xs" id="btn">删除</a>
                    </td>
              </tr>
              <?php endforeach ?>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

  <?php $current_page = 'categories'; ?>
  <?php include 'inc/sidebar.php'; ?>

  <script src="../static/assets/vendors/jquery/jquery.js"></script>
  <script src="../static/assets/vendors/bootstrap/js/bootstrap.js"></script>
  <script>
  $(function($){
    var $btn_delete=$("#btn_delete");
    var $input=$("tbody input");
    var flag=false; 
    var checksAll=[];
    var $all=$("#all");
    var length=$input.length;
    var $input1=$("thead input");
    $input.on('change',function(){
        var id=$(this).attr('data-id');
        if($(this).prop("checked")){
            //如果这个选中了，就把它放到数组里
            //两个语句有一个成立就行，判断下这个id在不在这个数组中，不在再加进数组
            checksAll.includes(id) || checksAll.push(id);
        }else {
            //如果这个没被选中，就从数组里拿出来
            //先找出这个元素在数组里的索引，在删除
           checksAll.splice(checksAll.indexOf(id),1); 
        }
        checksAll?$btn_delete.fadeIn() : $btn_delete.fadeOut();
        //设置dom属性只能用prop,search属性是a标签的一个属性，后面跟？参数
        $btn_delete.prop('search', '?id=' + checksAll);
        //checksAll.push(id);
        //两个等号。。。。。。。。。。。。
        if(length==checksAll.length){
            $all.prop("checked",true);
        }else{
            $all.prop("checked",false);
        }
        //if($all.checked="checked"){
        //  for(var i=0;i<length;i++){
        //  $input[i].checked="checked";
        //  console.log("jjj");
        // }
       // }else{
       //   for(var i=0;i<length;i++){
       //     $input[i].checked="";
       //   }
       // }
       // 上面选中则底下全选失败。想法是对的，知道遍历，但这不是个事件，不能被触发
    });
//给上面那个input注册一个事件啊啊啊
   $all.on('change',function(){
        var checked=$(this).prop('checked');
        $input.prop('checked',checked).trigger('change');//也可以直接.change 
   });





    //$input.on('change',function(){
    //    $input.each(function(i, item) {
    //        /**
    //        *each函数每到一个i都要执行一次函数
    //        *prop 和 attr 的区别：
    //        *prop可以显示和设置标签的所有dom属性，并且如果这个属性值为true或false，只能用prop
    //        *attr只能显示和设置标签中现在显示的属性，并且如果这个属性值为true或false，只能输出属性值，//不能判断是true还是false
    //        */
    //         if($(item).prop('checked')){
    //            flag=true;
    //        }
    //    });
    //    flag ? $btn_delete.fadeIn() : $btn_delete.fadeOut();
    //});
  });
  </script> 
  <script>NProgress.done()</script>
</body>
</html>
